<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- Favicon  -->
<link rel="icon" type="image"
	href="<c:url value="/resources/favicon.ico"/>">

<!-- Bootstrap Core CSS -->
<link rel="stylesheet"
	href="<c:url value="/resources/css/bootstrap.min.css"/>">

<!-- MetisMenu CSS -->
<link href="<c:url value="/resources/css/metisMenu.min.css"/>"
	rel="stylesheet">

<!-- Timeline CSS -->
<link href="<c:url value="/resources/css/timeline.css"/>"
	rel="stylesheet">

<!-- Custom CSS -->
<link href="<c:url value="/resources/css/sb-admin-2.css"/>"
	rel="stylesheet">

<!-- Morris Charts CSS -->
<link href="<c:url value="/resources/css/morris.css"/>" rel="stylesheet">

<!-- Bootstrap DatePicker CSS -->
<link href="<c:url value="/resources/css/datepicker.css"/>"
	rel="stylesheet">

<!-- Custom Fonts -->
<link href="<c:url value="/resources/css/font-awesome.min.css"/>"
	rel="stylesheet" type="text/css">

<!-- jQuery -->
<script src="<c:url value="/resources/js/jquery-1.11.0.min.js"/>"></script>

<!-- Bootstrap Core JavaScript -->
<script src="<c:url value="/resources/js/bootstrap.min.js"/>"></script>

<!-- Bootstrap DatePicker JavaScript -->
<script src="<c:url value="/resources/js/bootstrap-datepicker.js"/>"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="<c:url value="/resources/js/metisMenu.min.js"/>"></script>

<!-- Custom Theme JavaScript -->
<script src="<c:url value="/resources/js/sb-admin-2.js"/>"></script>

<title><%=request.getParameter("pageTitle")%> - Purposeful
	Community</title>
<style type="text/css">
body {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #E8EDED;
}

#header .btn {
	max-width: 330px;
	background-color: #44BBF8;
	color: #f05607;
	font-weight: bolder;
}

#header {
	-webkit-box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);
	width: 100%;
	top: 0px;
	position: fixed;
	float: left;
	background-color: #44BBF8;
	z-index: 1;
}

.logo {
	border: 0px;
	max-width: 45%;
	max-height: 20%;
}

.btn:hover {
	background-color: beige;
	color: #f05607;
}

.searchDiv {height = 20%;
	
}
</style>
</head>
<body>
	<!-- header bar -->
	<div id="header">
		<div class="btn-group"
			style="width: 100%; padding-right: 15%; padding-left: 15%; margin: 2px;">
			<!-- logo -->
			<a href="<c:url value='/'/>" type="button"
				class="btn btn-default logo" style="margin: inherit;"><img
				src="http://i.imgur.com/po9lZ2A.gif" class="logo" /></a>
			<div
				style="float: left; margin: inherit; width: 50%; display: inline-flex;"
				class="searchDiv">
				<form action="<c:url value='/community/search'/>"
					style="display: inline-flex; width: 100%; margin-bottom: 0px;"
					method="POST">
					<input class="form-control" style="float: left; max-width: 1000px;"
						type="text" name="name" placeholder="Search for communities" /> <span
						onclick="$(this).parent().submit();"
						class="glyphicon glyphicon-search"
						style="zoom: 1.4; left: -20px; top: 5px;" type="submit"></span>
				</form>
			</div>
			<c:choose>
				<c:when test="${not empty sessionUser}">
					<a href="<c:url value='/'/>" type="button" class="btn btn-default"
						style="margin: 2px 0px 0px 50px; float: left;"><c:if
							test="${not empty sessionUser.name}"></c:if> ${sessionUser.name}</a>
					<a href="<c:url value='/'/>" type="button" class="btn btn-default"
						style="margin: 2px 0px 0px 0px; float: left;">Home</a>
					<div class="btn-group" style="float: left; margin: 2px 0px;">
						<button type="button"
							style="margin: 0px; float: right; height: 34px;"
							class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu"
							style="background-color: #44BBF8; color: #FFFFFF;">
							<li><a href="<c:url value='/community/new'/>">Create
									Community</a></li>
							<li><a href="<c:url value='/profilepage'/>">Profile Page</a></li>
							<li><a href="<c:url value='/signout'/>">Sign Out</a></li>
						</ul>
					</div>

				</c:when>
				<c:otherwise>
					<a href="<c:url value='/signin'/>" type="button"
						class="btn btn-default" style="margin: inherit;">Sign In</a>
					<a href="<c:url value='/signup'/>" type="button"
						class="btn btn-default" style="margin: inherit;">Sign Up</a>
				</c:otherwise>
			</c:choose>
		</div>
	</div>